<template>
	<view class="input-group" :class="{inputLeft:isLeft==true}">
		<input :placeholder="placeholder" v-input-fb v-push-up v-no-space:name="name" :maxlength="30" :disabled='disabled' @input="search" @blur="hideList" v-model="name" />
		<view class="ul" v-if="ishow">
			<view class="li" v-for="(item,index) in list" :key="index" @tap="select(item)">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		props: {
			placeholder: String, //默认提示
			dataSource: {
				type: Array,
				default: function() { //数据源
					return [];
				}
			},
			disabled:{
				type: Boolean,
				default: false
			},
			isLeft:{
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				list: [],
				ishow:false,
				name: '',
			};
		},
		destroyed() {
			clearTimeout(this.t);
		},
		methods: {
			search(e) {
				let val = e.detail.value;
				// let str = /[^\u4E00-\u9FA5]/g
				// if (!str.test(val)) {
				this.name = val
				this.$emit('select', '');
				let {
					dataSource
				} = this;
				let arr = [];
				for (let i = 0; i < dataSource.length; i++) {
					if (dataSource[i].name.indexOf(val) !== -1) {
						arr.push(dataSource[i]);
					}
					if(dataSource[i].name === val){ // 输入匹配 码值
						this.$emit('select', dataSource[i].id);
					}
				}
				if (!val) {
					this.list = [];
				} else if (arr.length!=0) {
					this.list = arr;
					this.ishow = true
				}
				this.$emit('input', this.name);
				// }
			},
			select(item) {
				this.name = item.name;
				this.list = [];
				this.$emit('select', item.id);
			},
			hideList() {
				setTimeout(() => {
					this.list = [];
					this.ishow = false
				},0);
			},
			echoSzzy(val){
				this.dataSource.forEach(e=>{
					if(e.id === val){
						this.name=e.name
					}
				})
			},
		}
	}
</script>


<style scoped lang="scss">
	.input-group {
		position: relative;
		width: 100%;
		text-align: right;
		input {
			height: 80rpx;
			font-size: 28rpx;
		}
		.ul {
			position: absolute;
			right: 0;
			top: 100%;
			text-align: center;
			width: 80%;
			z-index: 199;
			background: #fff;
			border-radius: 20rpx;
			border: 1px solid #D7D7D7;
			height: 700rpx;
			overflow-y: scroll;
			.li {
				line-height: 60rpx;
			}
		}
	}
	.inputLeft{text-align: left!important;}
</style>
